<template>
   <div class="ivu-row-flex ivu-row-flex-middle ivu-row-flex-center">
    <div class="ivu-col ivu-col-span-24">
      <div>
        <Card class="dev-sign-main" :shadow="true" :dis-hover="true">
          <div class="dev-sign-main-asid">
            <div class="dev-sign-main-aside-tip">
              <div class="login-div">
              <div class="logo flexC">
                <img src="../../assets/login/logo.jpeg" alt="" >
              </div>
                <Divider>
				{{siteTitle}}
				<Icon type="ios-swap" :size=20 />
				{{clientName}}
				</Divider>
              <Form v-if="isLogin" ref="formValidate1" class="login-from" :model="loginJson" :rules="loginCheck">
                <FormItem prop="userName">
                  <label>
                    <Input prefix="ios-person-outline" type="text" v-model="loginJson.userName" autofocus clearable placeholder="请输入用户名" />
                  </label>
                </FormItem>
                <FormItem prop="passWord">
                  <label>
                    <Input prefix="ios-lock-outline" type="password" v-model="loginJson.passWord" clearable placeholder="请输入密码" />
                  </label>
                </FormItem>
                <FormItem prop="isSave" class="isSave flexR">
                  <Checkbox v-model="loginJson.isSave">自动登录</Checkbox>
                  <span class="blueText">忘记密码</span>
                </FormItem>
                <FormItem prop="isSave" class="isSave other-Login flexR">
                   <span>
                     <span>其它登录方式</span>
                     <img src="../../assets/login/weixin.svg" alt="">
                     <img src="../../assets/login/qq.svg" alt="">
                     <img src="../../assets/login/weibo.svg" alt="">
                   </span>
                  <span class="blueText">注册账户</span>
                </FormItem>
                <FormItem>
                  <Button type="primary" long :loading="loading" @click="login('formValidate1')">
                    <span v-if="!loading">登录</span>
                    <span v-else>请稍后...</span>
                  </Button>
                </FormItem>
              </Form>
                <Form v-else ref="formValidate2" class="login-from" :model="registerJson" :rules="registerCheck">
                  <FormItem prop="mail">
                    <label>
                      <Input prefix="ios-mail-outline" type="text" v-model="registerJson.mail" autofocus clearable placeholder="请输入邮箱" />
                    </label>
                  </FormItem>
                  <FormItem prop="userName">
                    <label>
                      <Input prefix="ios-person-outline" type="text" v-model="registerJson.userName" clearable placeholder="请输入用户名" />
                    </label>
                  </FormItem>
                  <FormItem prop="passWord">
                    <label>
                      <Input prefix="ios-lock-outline" type="password" v-model="registerJson.passWord" clearable placeholder="至少6位密码，区分大小写" />
                    </label>
                  </FormItem>
                  <FormItem prop="passWord1">
                    <label>
                      <Input prefix="ios-lock-outline" type="password" v-model="registerJson.passWord1" clearable placeholder="请再次输入密码" />
                    </label>
                  </FormItem>
                  <!-- <FormItem prop="isSave" class="isSave flexR">
                       <Checkbox v-model="registerJson.isSave">自动登录</Checkbox>
                       <span class="blueText">忘记密码</span>
                   </FormItem>-->
                  <FormItem>
                    <Button type="primary" long :loading="loading" @click="login('formValidate2')">
                      <span v-if="!loading">注册</span>
                      <span v-else>请稍后...</span>
                    </Button>
                  </FormItem>
                  <FormItem prop="isSave" class="flexR">
                    <span class="blueText" @click="isLogin=true">使用已有账户登录</span>
                  </FormItem>
                </Form>
              </div>
            </div>
          </div>
          <div class="footer_components flexC">
            <div>
              <img src="../../assets/main/beian.png" height="20" width="20" style="float:left;" alt=""/>
                <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44010502001814"
                   style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">

                  <span style="height:20px;line-height:20px; color:#939393; font-size: 10px">
                    粤公网安备 44010502001814号
                </span>
                </a>
                <a target="_blank" href="https://beian.miit.gov.cn/" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
                <span style="height:20px;line-height:20px; color:#939393;font-size: 10px">
                    粤ICP备2020125785号
                </span>
                </a>
            </div>
          </div>
        </Card>
      </div>
    </div>
  </div>
</template>

<script>
import {authenticate} from '@/api/userApi'
import SessionUtil from "@/lib/SessionUtil";
import {Encrypt} from "@/lib/Secret";
import Footer from '@/components/footer/footer'
import {clientCheck} from '@/api/clientApi';
export default {
  name: "login",
  components: {Footer},
  data() {
    return {
      siteTitle: '授权平台',
	  clientName: '',
      loading: false,
      isLogin: true, // 是否登陆模式
      clientId: '',
      loginJson: {
        userName: 'test',
        passWord: 'share',
        isSave: true
      },
      registerJson: {
        mail: '',
        userName: '',
        passWord: '',
        passWord1: ''
      },
      loginCheck: {
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        passWord: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      },
      registerCheck: {
        /*mail: [
            { required: true, message: '请输入邮箱', trigger: 'blur' },
            { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
        ],
        userName: [
            { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        passWord: [
            { required: true, message: '请输入密码', trigger: 'blur' }
        ]*/
      }
    }
  },
  created() {
	  let clientId = '';
	  if (this.$route.params.clientId){
		  clientId = this.$route.params.clientId;
      }
      else if (this.$route.query.clientId){
		  clientId = this.$route.query.clientId;
     }
	 SessionUtil.setItem('clientId',this.$route.query.clientId)
	 clientCheck(clientId).then(res=>{
		 if(res){
			this.clientName = res.clientName;
		 }
	 })
  },
  mounted() {
  },
  methods: {
    // 登陆
    login (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.loading = true
          authenticate({
            username: Encrypt(this.loginJson.userName),
            password: Encrypt(this.loginJson.passWord),
            clientId: SessionUtil.getItem('clientId')
          }).then(res=>{
            this.loading = false
            window.location.href = res;
          },reject=>{
            this.loading = false
            console.log(reject)
          })
        }
      })
    },
  },
  watch: {},
  filters: {}
}
</script>

<style lang="less">
body {
  background-color: #f8f8f9;
}
.ivu-row-flex{display:flex;flex-direction:row;flex-wrap:wrap}
.ivu-row-flex:after,
.ivu-row-flex:before{display:flex}
.ivu-row-flex-start{justify-content:flex-start}
.ivu-row-flex-center{justify-content:center}
.ivu-row-flex-end{justify-content:flex-end}
.ivu-row-flex-space-between{justify-content:space-between}
.ivu-row-flex-space-around{justify-content:space-around}
.ivu-row-flex-top{align-items:flex-start}
.ivu-row-flex-middle{align-items:center}
.ivu-row-flex-bottom{align-items:flex-end}
.dev-sign-main{width:400px;margin:60px auto;padding:0 16px}
.dev-sign-main-label{display:inline-block}
.dev-sign-main-aside{margin-top:32px}
.dev-sign-main-aside-tip{text-align:center;margin:16px 0 16px}
.dev-sign-verify{text-align:center;margin-top:96px}
.dev-sign-verify-tip{margin:18px;font-size:24px;color:#17233d}
.dev-sign-verify-desc{width:50%;margin:0 auto;color:#808695;font-size:14px}
.dev-sign-verify-desc span{color:#2d8cf0}
.dev-sign-authorize-title{text-align:center;border-bottom:1px solid #e8eaec;padding-bottom:16px;margin-bottom:32px}
.dev-sign-authorize-title img{display:inline-block;width:100px;height:100px;vertical-align:middle}
.dev-sign-authorize-title-swap{display:inline-block;margin:0 16px;vertical-align:middle}
.dev-sign-authorize-title-swap span{display:block}
.dev-sign-authorize-user{text-align:center}
.dev-sign-authorize-user-avatar.ivu-avatar{width:64px;height:64px;border-radius:50%}
.dev-sign-authorize-user-name{display:block;font-size:16px;padding:6px 0;margin-bottom:12px}
.login-div {
  text-align: center;
  background-color: white;
  border-radius: 5px;
  & > .logo {
    img {
      height: 90px;
    }
    span {
      font-size: 14px;
      margin-bottom: 20px;
    }
  }

  & > .login-from {
    .isSave {
      width: 100%;
      .ivu-form-item-content {
        width: 100%;
        display: inline-flex;
        flex-direction: row;
        justify-content: space-between;
      }
    }
    .other-Login {
      .ivu-form-item-content {
        & > span {
          img {
            width: 24px;
            margin-left: 16px;
            cursor: pointer;
            vertical-align: middle;
            opacity: .7;
            transition: all .2s ease-in-out;
          }
        }

      }
    }
  }
}
.footer_components {
  width: 100%;
  margin:20px 0 0 0;
  justify-content: center;
  align-items: center;
  a{
    color: #515a6e;
    &:hover{
      color: #1890FF;
    }
  }
  span{
    color: #515a6e;
  }
  &>div:first-child{
    span{
      margin-right: 5px;
    }
    margin-bottom: 0;
  }
}
</style>
